<template>
    <div>
        <section>
            <el-form
                ref="form"
                :model="queryForm"
                label-width="61px"
                :inline="true"
                class="queryForm adjustCondition"
            >
                <el-form-item label="关键字:">
                    <el-input
                        v-model="queryForm.keyWord"
                        size="small"
                        placeholder="请输入客户名称/业务编号查询"
                    ></el-input>
                </el-form-item>
                <el-form-item label="生效时间:" label-width="75px">
                <TimeSelect :endTime="value4" :startTime="value3"  @getTime="getTime1"></TimeSelect>
                </el-form-item>
                <el-form-item label="状态:" label-width="51px">
                    <el-select clearable v-model="queryForm.checkedState" placeholder="全部">
                        <el-option
                            v-for="item in  $dictUtils.getDictList('busState')"
                            v-if="item.value !== '-1'"
                            :key="item.value"
                            :label="item.label"
                            :value="Number(item.value)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class="but-container">
                        <el-button
                            type="primary"
                            size="small"
                            class="search-btn"
                            @click="
                getList(
                  1,
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyWord,
                  queryForm.date,
                  queryForm.checkedState
                )
              "
                        >查询
                        </el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </section>
        <div>
            <section class="right-but" style="display:flex;margin-bottom:10px">
                <el-button type="text" style="margin-right:-13px;cursor:pointer;" @click="getList(
                  1,
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyWord,
                  queryForm.date
                )">
                    <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                </el-button>
                <PopoverBut :checkedProps="checkedProps" style="" :options="options"
                            @getCheckeds="handlerCloumn"></PopoverBut>

            </section>
        </div>

        <el-table
            size="mini"
            v-loading="loading"
            :data="tableData"
            style="width: 100%;"
            border
            :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
            :row-class-name="tableRowClassName"
        >
            <el-table-column type="index" label="序号" width="70" align="center">
                <template slot-scope="scope">
          <span>{{
                  (page.pageNo - 1) * page.pageSize + scope.$index + 1
              }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="codes" label="业务编号" min-width="210">
                <template slot-scope="scope">
                <el-link type="primary" :underline="false" v-if="hasPermission('busin:product:edit')"
                         @click="handleCommand($event, scope.row)">{{scope.row.codes}}</el-link>
                    <span v-else>{{scope.row.codes}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="companyName"  label="客户名称" min-width="200"></el-table-column>
            <el-table-column prop="productName"  label="产品名称" min-width="105"></el-table-column>
            <el-table-column   label="调整后价格" min-width="120" align="right">
              <template slot-scope="scope">
                  {{scope.row.price | thousandSep}}
              </template>
            </el-table-column>
            <el-table-column prop="effectTime" label="开始执行时间" min-width="200"></el-table-column>
            <el-table-column prop="address" label="操作" width="128">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        :underline="false"
                        @click="edit(scope.row)"
                        v-if="hasPermission('busin:product:edit')"
                    >修改
                    </el-link>
                    <el-link
                        type="primary"
                        :underline="false"
                        @click="del(scope.row.id,scope.row.state)"
                        v-if="hasPermission('busin:product:edit')"
                    >删除
                    </el-link>
                </template>
            </el-table-column>
            <span>
        <el-table-column
            prop="state"
            label="状态"
            sortable="custom"
            min-width="190px"
        >
          <template slot-scope="scope">
            <div v-if="JSON.stringify(scope.row.flowState) === '{}'">
              <div class="state invalid" v-if="scope.row.state === -1 || scope.row.state === 4"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
              <div class="state empty" v-if="scope.row.state === 1 || scope.row.state === 3" type="info"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
              <div class="state process" v-if="scope.row.state === 2"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
                <!--              <div-->
                <!--                v-if="scope.row.state === 3 || scope.row.state === 4"-->
                <!--                type="danger"-->
                <!--                class="state invalid"-->
                <!--                ><span></span>{{ $dictUtils.getDictLabel("busState", scope.row.state, "") }}-->
                <!--              </div>-->
              <div class="state normal" v-if="scope.row.state === 100" type="success"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
            </div>
            <div v-else>
              <div
                  v-if="
                  scope.row.flowState.code === 0 ||
                  scope.row.flowState.code === 3 ||
                  scope.row.flowState.code === 4 ||
                  scope.row.flowState.code === 5
                "
                  type="danger"
                  class="state process"
              ><span></span>{{ scope.row.flowState.status }}</div>
              <span v-if="scope.row.flowState.deleteReason"></span>
              <div class="state process" v-if="scope.row.flowState.code === 2" type="primary"
              ><span></span>{{ scope.row.flowState.status }} [{{
                      scope.row.flowState.currentTask.name
                  }}]</div>
              <div class="state process" v-if="scope.row.flowState.code === 100" type="success"><span></span>{{
                      scope.row.flowState.status
                  }}</div>
            </div>
          </template>
        </el-table-column>
      </span>
            <span v-for="(item,index) in checkedProps" :key="index">
              <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy && scope.row.createBy.loginName">
                      {{scope.row.createBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
         <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy && scope.row.updateBy.loginName">
                      {{scope.row.updateBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>

      </span>


        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page="page.pageNo"
            layout="total,sizes,prev, pager, next, jumper"
            :total="page.total"
        >
        </el-pagination>
        <EditForm
            ref="EditForm"
            @refreshDataList="getList(1, page, orderBy.name, orderBy.method)"
        ></EditForm>
        <TaskForm flowTitle="销售调价详情" v-if="" :procInsId="procInsId" ref="TaskForm"></TaskForm>
    </div>
</template>
<script>
    import {getList, businessProductDelete} from "@/api/business/business.js";
    import EditForm from "./yetEditForm.vue";
    import PopoverBut from "@/components/button/popoverBut";
    import TaskForm from "@/components/flow/TaskForm";
    import pick from "lodash.pick";

    const options1 = [];
    const cityOptions = ["上海", "北京"];
    export default {
        components: {
            EditForm,
            PopoverBut,
            TaskForm
        },

        data() {
            return {
                flow1: {
                    id: "e951932e-39ea-11eb-bb1e-3ae0fb62fce6",
                    formType: "2",
                    formReadOnly: false,
                    procInsId: "e950f6e5-39ea-11eb-bb1e-3ae0fb62fce6",
                    procDefId: "businessProductApprove:1:fd8b0efc-3939-11eb-a07b-e24460a369f9",
                    procDefKey: "businessProductApprove",
                    businessTable: "t_business_product",
                    businessId: "775731122880524288",
                    isNextGatewaty: false,
                    formUrl: "/flowable/editForm/BusinessProductEditForm",
                    procDefName: "",
                    durationTime: "",
                    todoTask: true,
                    finishTask: true,
                    startTask: false,
                },
                detailsVisible: false,
                procInsId: "",
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", [start, end]);
                            },
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit("pick", [start, end]);
                            },
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit("pick", [start, end]);
                            },
                        },
                    ],
                },
                checkedProps: options1,
                ShowCloum: {createDate: ""},
                options: [
                    {label: '创建人', key: 'createBy.loginName'},
                    {label: '创建时间', key: 'createDate'},
                    {label: '上次操作人', key: 'updateBy.loginName'},
                    {label: '上次操作时间', key: 'updateDate'}
                ],
                tableData: [],
                orderBy: {
                    name: "update_date",
                    method: "desc",
                },
                loading: false,
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0,
                },
                props: 1,
                queryForm: {
                    checkedCities: 0,
                },
                value3:'',
                value4:'',
                checkedCities: [],
                cities: cityOptions,
            };
        },
        methods: {
          getTime1(e){
            console.log(e)
            this.value3=e.startTime;
            this.value4=e.endTime;
          },
// 删除价格策略
            del(ids, state) {
                if (state === 2) {
                    this.$notify.error({
                        title: '错误',
                        message: '审批中，不允许删除！'
                    });
                } else if (state === -1) {
                    this.$notify.error({
                        title: '错误',
                        message: '已提交的数据不允许删除！'
                    });
                } else if (state === 100) {
                    this.$notify.error({
                        title: '错误',
                        message: '已生效，不允许删除！'
                    });
                } else if (state === 1) {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then((res) => {
                        businessProductDelete({
                            ids: ids
                        }).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    type: 'success',
                                    message: '已删除!'
                                })
                                this.getList(1, this.page, this.orderBy.name, this.orderBy.method);
                            }
                        })
                    });
                }

            },
            // 详情
            handleCommand(command, row) {
                console.log(row);
                console.log(command);
                if (row.procInsId) { // 有审批流程
                    this.details(row);
                } else { // 无审批流程
                    let editForm = {};
                    editForm.id = row.id;
                    editForm.flowStateus = row.flowState.code;
                    if (row.flowState.currentTask) {
                        editForm.taskKey = row.flowState.currentTask.taskDefinitionKey;
                    }
                    editForm.companyName = row.companyName;
                    editForm.payMode = row.payMode;
                    editForm.newPrice = row.price;
                    editForm.productName = row.productName;
                    editForm.codes = row.codes;
                    editForm.effectTime = row.effectTime;
                    console.log(row);
                    this.$refs.EditForm.init('info', editForm);
                }
            },
            // 调价详情
            details(row) {
                console.log(11);
                console.log(row);
               this.$refs.TaskForm.detailsVisible = true;
                this.procInsId = row.procInsId;
            },
            // 获取列表带分页
            getList(processType, params, orderName, orderByAORC, keyWord, date, state) {
                this.loading = true;
                getList({
                    processType: processType,
                    pageSize: params.pageSize,
                    pageNo: params.pageNo,
                    orderBy: orderName,
                    orderByAORC: orderByAORC,
                    keyWord: keyWord,
                    effectTime: this.value3,
                    effectEndTime: this.value4,
                    state: state
                }).then((res) => {
                    if (res.data.code === "200") {
                        for (let i = 0; i < res.data.result.list.length; i++) {
                            if (!res.data.result.list[i].flowState) {
                                let flowState = {};
                                this.$set(res.data.result.list[i], "flowState", flowState);
                            }
                        }
                        this.tableData = res.data.result.list;
                        console.log(2123);
                        console.log(this.tableData);
                        this.page.total = res.data.result.count;
                    }
                    this.loading = false;
                });
            },
            // 编辑
            edit(row) {
                let editForm = {};
                editForm.id = row.id;
                editForm.flowStateus = row.flowState.code;
                if (row.flowState.currentTask) {
                    editForm.taskKey = row.flowState.currentTask.taskDefinitionKey;
                }
                editForm.companyName = row.companyName;
                editForm.payMode = row.payMode;
                editForm.newPrice = row.price;
                editForm.productName = row.productName;
                editForm.codes = row.codes;
                editForm.effectTime = row.effectTime;
                console.log(row);
                this.$refs.EditForm.init('edit', editForm);
            },
            // 是否显示某列数据
            handlerCloumn(e) {
                this.checkedProps = e;
                // console.log(e)
            },
            // 重置查询条件
            reset() {
                this.queryForm = {};
                this.value3=''
                this.value4=''
                this.getList(1, this.page, this.orderBy.name, this.orderBy.method);
            },
            // 排序
            sortthiscolumn(a) {
                this.orderBy.name = a.prop;
                this.page.pageNo = 1;
                if (a.order === "ascending") {
                    this.orderBy.method = "asc";
                } else {
                    this.orderBy.method = "desc";
                }
                this.getList(1, this.page, this.orderBy.name, this.orderBy.method);
            },
            handleSizeChange(e) {
                this.page.pageSize = e;
                this.getList(1, this.page, this.orderBy.name, this.orderBy.method);
            },
            handleCurrentChange(e) {
                this.page.pageNo = e;
                this.getList(1, this.page, this.orderBy.name, this.orderBy.method);
                console.log(e);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return "warning-row";
                } else {
                    return "success-row";
                }
            },
        },
        mounted() {
            // this.tableData = [{ names: '1' }]
            this.getList(1, this.page, this.orderBy.name, this.orderBy.method);
        },
    };
</script>
<style lang="scss" scoped>
    ::v-deep .el-input--small .el-input__inner {
        height: 36px;
        line-height: 32px;
        width: 230px;
    }

    ::v-deep.queryForm {
        /*margin-bottom: 20px;*/
        .el-form-item {
            margin-right: 25px;
            margin-bottom: 20px;
        }
        .el-range-editor.el-input__inner{
            width: 370px;
        }

        .el-form-item:last-child {
            margin-right: 0;
        }
    }

    .right-but {
        float: right;
        /*margin-right: 10px;*/
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    ::v-deep .el-table {
        .detail {
            margin-right: 40px;

            .el-link--inner {
                margin-right: 0 !important;
            }
        }
        td:not(:last-child){
            .cell{
                .el-link--inner{
                    margin-right: 0 !important;
                }
            }
        }
    }
</style>
